<template>
  <div style = "padding: 10px">
    <div style = "margin: 10px  0">
      <el-input style="width: 300px" placeholder="请输入名称" v-model="student_name" clearable></el-input>
      <el-button type="warning" @click="load" style="margin-left: 5px"> <el-icon><Search /></el-icon></el-button>
      <el-button type="warning"  @click ="reset">重置</el-button>
        <div class="flex">
        </div>

        <el-table :data = "state.tableData"  style="width: 100%">
          <el-table-column prop="student_id" label="学号"  />
          <el-table-column prop="student_name" label="姓名"  />
          <el-table-column prop="student_nation" label="民族" />
          <el-table-column prop="student_grade" label="年级" />
          <el-table-column prop="student_college" label="学院" />
          <el-table-column prop="student_total" label="总分" />
          <el-table-column prop="student_scholarship_name" label="奖学金" />
        </el-table>

        <div style="margin: 10px 0 " >
          <el-pagination background layout="prev, pager, next,total,sizes"
                         v-model:current-page="pageNum"
                         v-model:page-size="pageSize"
                         :page-sizes="[1, 5, 15, 20]"
                         :total="total"
                         @size-change="load"
                         @current-change="load"
          />
        </div>
      </div>
    </div>

</template>

<script setup>
import {reactive, ref} from "vue";
import request from "@/utils/request";
import {Search} from "@element-plus/icons-vue";

const state = reactive({
  tableData : [],
  form:{},
})

const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(20)


const dialogFormVisible = ref(false)
const globalIndex = ref(-1)  //保存编辑的行号
const student_name = ref('')

const load = () => {
  let start = (pageNum.value - 1) *pageSize.value
  request.get('/student/page?student_name=' + student_name.value +'&start=' + start + '&pageSize=' +pageSize.value).then(res => {

    state.tableData =res.data.list
    total.value =res.data.total
  })
}
load()

//重置数据
const reset =() =>{
  student_name.value = ''
  load()
}

</script>



<style scoped>

</style>